<!DOCTYPE html>
<html>
    
    <head>
       <meta charset="UTF-8">
        {include="style"}
		{include="edit"}
		<style>
		.preview{
			width:100px;
		}
		</style>
    </head>
    
    <body>
	 <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>{fun JZLANG('首页')}</cite></a>
              <a><cite>{fun JZLANG('导航管理')}</cite></a>
			  <a><cite>{fun JZLANG('新增导航')}</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="{fun JZLANG('刷新')}"><i class="iconfont" style="line-height:30px">&#xe6aa;</i></a>
        </div>
        <div class="x-body">
            <form class="layui-form layui-form-pane" >
			<input type="hidden" name="go" value="1" />
			
			<div class="layui-tab">
			  <ul class="layui-tab-title">
				<li class="layui-this">{fun JZLANG('基本信息')}</li>
			  </ul>
			  <div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
				 <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red"></span>{fun JZLANG('导航名称')}
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" value="" style="width:500px;" name="name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
				<div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red"></span>{fun JZLANG('导航菜单')}
                    </label>
                    <div class="layui-input-block">
					
                        <table class="layui-table">
						  <thead>
							<tr>
							  <th>{fun JZLANG('栏目')}</th>
							  <th>{fun JZLANG('标题')}</th>
							  <th>{fun JZLANG('图片')}</th>
							  <th>{fun JZLANG('链接')}</th>
							  <th>{fun JZLANG('打开')}</th>
							  <th>{fun JZLANG('显示')}</th>
							  <th>{fun JZLANG('操作')}</th>
							</tr> 
						  </thead>
						  <tbody>
						  
							<tr>
							  <td>
								<select name="tid[]" lay-filter="tid">
									{foreach $classtypetree as $v}
									 <option  value="{$v['id']}">{fun str_repeat('--', $v['level'])}{$v['classname']}</option>
									{/foreach}
									<option value="0">{fun JZLANG('自定义链接')}</option>
								</select>
							  </td>
							  <td><input type="text" name="title[]"  placeholder="{fun JZLANG('不填默认栏目名称')}" autocomplete="off" class="layui-input"></td>
							  <td><input type="text" name="litpic[]"  placeholder="{fun JZLANG('不填默认空')}" autocomplete="off" class="layui-input">
								<img class="preview" onerror="this.src='{__Tpl_style__}/style/images/nopic.jpg'" src="">
							    <button type="button" class="layui-btn layui-btn-sm uploadimg">
								  <i class="layui-icon">&#xe67c;</i>{fun JZLANG('上传图片')}
								</button>
							  </td>
							  <td><input type="text" name="gourl[]"  placeholder="{fun JZLANG('自定义链接则需要填写')}" autocomplete="off" class="layui-input"></td>
							  <td>
								<select name="target[]" >
									<option value="_self">{fun JZLANG('本页面')}</option>
									<option value="_blank">{fun JZLANG('新页面')}</option>
								</select>
							  </td>
							  <td>
								<select name="status[]" >
									<option value="1">{fun JZLANG('显示')}</option>
									<option value="0">{fun JZLANG('不显示')}</option>
								</select>
							  </td>
							  <td>
							  <a class="layui-btn layui-btn-xs" onclick="add(this)" >{fun JZLANG('新增')}</a>
							  </td>
							</tr>
							
						  </tbody>
						</table>
					
                    </div>
                </div>
				
				<div class="layui-form-item" pane>
                    <label for="isshow" class="layui-form-label">
                        <span class="x-red"></span>{fun JZLANG('是否显示')}
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="isshow" value="0" title="{fun JZLANG('不显示')}">
						<input type="radio" name="isshow" value="1" title="{fun JZLANG('显示')}" checked>
                    </div>
					 
					
                </div>
				
				
					
				</div>
				
			  </div>
			</div>
						
               
                
                <div class="layui-form-item"   style="text-align:center;">
                    
                     <button  class="layui-btn" lay-filter="save" lay-submit="">
                        {fun JZLANG('保存')}
                    </button>
                </div>
            </form>
        </div>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
      
        <script>

		$(function(){
			$(".preview").click(function(){
				var url = $(this).attr('src');
				window.open(url)
			
			})
			

		})
            layui.use(['laydate','form','layer','upload'], function(){
                $ = layui.jquery;
              var form = layui.form,layer = layui.layer,laydate = layui.laydate;
			 var upload = layui.upload;
			   
			  //执行实例
			  var uploadInst = upload.render({
				elem: '.uploadimg' //绑定元素
				,url: '{fun U('common/uploads')}' //上传接口
				,done: function(res, index, upload){
				  //上传完毕回调
				  $(this.item).parent().children('.layui-input').val(res.url)
				  $(this.item).parent().children('.preview').attr('src',res.url)
				  
				}
				,error: function(){
				  //请求异常回调
				}
			  });
			 
			   form.on('select(tid)', function(data){
			 
				 
				  
				});
				
			    //监听提交
              form.on('submit(save)', function(data){
				$.post("{fun U('index/addmenu')}",data.field,function(r){
					var r = JSON.parse(r);
					if(r.code==0){
						layer.confirm(r.msg, {
						  btn: ['{fun JZLANG('返回')}','{fun JZLANG('确定')}'] //按钮
						}, function(){
						
							{if($webconf['admintpl']=='tpl')}
							window.location.href="{fun U('index/menu')}";
							{else}
							parent.location.reload();
							parent.layer.close(index);
							{/if}
						
						  
						}, function(){
						   window.location.href=r.url;
						});
						
					
					}else{
						layer.alert(r.msg, {icon: 5});
					}
				});
				
               
                return false;
              });
			  
			

              
            });
			function renderForm(a){
				layui.use(['laydate','form','layer','upload'], function(){
				  $ = layui.jquery;
				  var form = layui.form,layer = layui.layer,laydate = layui.laydate,upload = layui.upload;

				  upload.render({
					elem: '.uploadimg_'+a //绑定元素
					,url: '{fun U('common/uploads')}' //上传接口
					,done: function(res, index, upload){
					  //上传完毕回调
					  $(this.item).parent().children('.layui-input').val(res.url)
					  $(this.item).parent().children('.preview').attr('src',res.url)
					  
					}
					,error: function(){
					  //请求异常回调
					}
				  });
				  form.render();
				});
				
				
				
			}
			function randomString(e) {  
			  e = e || 32;
			  var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
			  a = t.length,
			  n = "";
			  for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
			  return n
			}



			function add(a){
				var rand = randomString(6);
				var html = '<tr>'+
							  '<td>'+
								'<select name="tid[]" lay-filter="tid">'+
									{foreach $classtypetree as $v}
									 '<option  value="{$v['id']}">{fun str_repeat('--', $v['level'])}{$v['classname']}</option>'+
									{/foreach}
									'<option value="0">{fun JZLANG('自定义链接')}</option>'+
								'</select>'+
							  '</td>'+
							  '<td><input type="text" name="title[]"  placeholder="{fun JZLANG('不填默认栏目名称')}" autocomplete="off" class="layui-input"></td>'+
							  '<td><input type="text" name="litpic[]"  placeholder="{fun JZLANG('不填默认空')}" autocomplete="off" class="layui-input"><img class="preview" onerror="this.src=\'{__Tpl_style__}/style/images/nopic.jpg\'" src=""><button type="button" class="layui-btn layui-btn-sm uploadimg_'+rand+'"><i class="layui-icon">&#xe67c;</i>{fun JZLANG('上传图片')}</button></td>'+
							  '<td><input type="text" name="gourl[]"  placeholder="{fun JZLANG('自定义链接则需要填写')}" autocomplete="off" class="layui-input"></td>'+
							  '<td>'+
								'<select name="target[]" >'+
									'<option value="_self">{fun JZLANG('本页面')}</option>'+
									'<option value="_blank">{fun JZLANG('新页面')}</option>'+
								'</select>'+
							 ' </td>'+
							  '<td>'+
								'<select name="status[]" >'+
									'<option value="1">{fun JZLANG('显示')}</option>'+
									'<option value="0">{fun JZLANG('不显示')}</option>'+
								'</select>'+
							  '</td>'+
							  '<td>'+
							  '<a class="layui-btn layui-btn-xs layui-btn-danger" onclick="del(this)" >{fun JZLANG('删除')}</a>'+
							  '<a class="layui-btn layui-btn-xs" onclick="add(this)" >{fun JZLANG('新增')}</a>'+
							  '</td>'+
							'</tr>';
				$(a).parent().parent().after(html);
				renderForm(rand);
			}
			function del(a){
				$(a).parent().parent().remove();
			}
			
        </script>
      
    </body>

</html>